<template>
  <div class="nav-box">

    <div @click="change(item.val,index)" v-for="(item,index) in data" :key="index" :style="{backgroundColor:(currIndex==index?'#2a2f33':item.bgc)}">
     
      <div>{{item.text}}</div>
     
      <div :style="{color:item.col}">{{item.num}}</div>

      <div v-if="currIndex==index"></div>

    </div>

 </div>
</template> 
<script setup>
import './nav.scss'
import {ref,onMounted} from 'vue'
import db from "@/data/db.js"

// 声明事件
const emit = defineEmits(['changestate']);

// 定义了数据：三种状态的数据。
const data = ref([
  {
    text:'待处理',
    num:'7',
    col:"red",
    val:"pending",
    bgc:'#1f232c'
  },
  {
    text:'处理中',
    num:'5',
    col:'green',
    val:"processing",
    bgc:'#1f232c'
  },
  {
    text:'已解决',
    num:'8',
    col:'white',
    val:"resolved",
    bgc:'#1f232c'
  } 
])


// 初始化
const init=()=>{
  //一、filter;
  data.value.forEach(stateItem=>{
    stateItem.num = db.filter(item=>item.state===stateItem.val).length
  })
}

onMounted(() => {
  init();
})

// 当前点击的下标
let currIndex = ref(0);

const change=(val,idx)=>{
  currIndex.value = idx;
  // emitter.emit('changeState',val);
  emit('changestate',val);
}



</script>

<style lang="scss">

</style>

